<template>
  <view class="wrapper" @tap.stop="navToDetail(info)">
    <view class="wrap-box">
      <view class="square-wrap">
        <view class="square-box">
          <image :src="info.thumb" mode="aspectFill" lazy-load></image>
        </view>
      </view>
      <view class="content">
        <view class="text-df text-333 text-cut-2" >
          <block v-if='info.goods_label'>
            <text  class="item-goods-label" v-for='item in info.goods_label'>
              {{item}}
            </text>
          </block>
          {{info.name}}
        </view>
        <view class="fu-cred margin-top-sm">
          <text>
            <text class="text-price text-bold text-sm"></text>
            <text class="text-lg text-bold margin-right-sm">
              {{info.shop_price}}
              <block v-if='info.goods_label_activity'>
                <text  class="item-activity-label" v-for='item in info.goods_label_activity'>
                  {{item}}
                </text>
              </block>
            </text>
          </text>
        </view>
        <view class="flex justify-between align-center text-sm text-999 margin-top-sm">
          <text class="text-price text-through">{{info.market_price}}</text>
          <text>月销量{{info.sales_sum}}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    props: {
      info: {
        type: Object
      },
    },
    methods: {
      navToDetail(item) {
        this.$urouter.navigateTo({
          url: '/pages/goods/goodsdetail/goods-detail',
          params: {
            sku_id: item.sku_id || 0,
            goods_id: item.id,
          }
        })
      },
    },
  }
</script>

<style lang="scss" scoped>
  .wrapper {
    overflow: hidden;
    margin-bottom: 20rpx;
    padding: 0 10rpx;
    .wrap-box {
      background-color: #FFFFFF;
      border-radius: 24rpx;

      .square-wrap {
        width: 100%;
        height: 0;
        padding-bottom: 100%;
        box-sizing: border-box;
        position: relative;

        .square-box {
          position: absolute;
          left: 0;
          top: 0;
          right: 0;
          bottom: 0;
          border-radius: 24rpx 24rpx 0 0;

          image {
            width: 100%;
            height: 100%;
            border-radius: 24rpx 24rpx 0 0;
          }
        }

      }
      .image{
        width: 100%;
        border-radius: 24rpx 24rpx 0 0;
      }
    }

    .content {
      padding: 20rpx;
    }
  }

  .text-cut-2 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  .text-through {
    text-decoration: line-through;
  }

  .text-333 {
    color: #333333;
  }

  .text-999 {
    color: #999999;
  }

  .name-title {
    position: relative;
  }

  .name-title-label {
    float: left;
  }

  .item-goods-label {
    background-image: linear-gradient(to right, #Ff9700, #Ed1c24);
    padding: 2rpx 5rpx;
    color: #ffffff;
    font-size: 24rpx;
    border-radius: 6rpx;
    margin-right: 9rpx;
  }
  .item-activity-label {
    padding: 2rpx 5rpx;
    /* margin: 5rpx; */
    font-size: 24rpx;
    border-radius: 6rpx;
    border: 1px solid;
    margin: 0rpx 1px 0px;
    display: inline-block;
    transform:scale(.8)
  }
</style>
